<template>
    <div>
      <el-form :model="queryForm" inline style="margin-left: 1%">
        <el-form-item label="小区名称">
          <el-input v-model="queryForm.premiseName" placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="queryForm.tenantName" placeholder="请输入租客姓名"></el-input>
        </el-form-item>
        <el-form-item label="收款单号">
          <el-input v-model="queryForm.receiptOrderNo" placeholder="请输入收款单号"></el-input>
        </el-form-item><br>
        <el-form-item label="收款状态">
          <el-select v-model="queryForm.skStatus" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账单类型">
          <el-select v-model="queryForm.billType" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="租房合同编号">
          <el-input v-model="queryForm.contractNo" placeholder="请输入租房合同编号"></el-input>
        </el-form-item><br>
        <el-form-item  label="应收日期" style="display: inline">
          <el-col :span="11">
            <el-date-picker type="date" placeholder=" " v-model="queryForm.startDate" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" align="center"> 至 </el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="" v-model="queryForm.endDate" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item  label="实收日期" style="display: inline" >
          <el-col :span="11">
            <el-date-picker type="date" placeholder=" " v-model="queryForm.collectionStartDate" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" align="center"> 至 </el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="" v-model="queryForm.collectionEndDate" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 820% " @click="getList">查询</el-button>
        </el-form-item>
      </el-form>

      <el-tabs type="border-card" v-model="receiptType"  style="width: 100%;margin-left: 1%" @tab-click="handleClick" >
        <el-tab-pane label="房租收款计划" name="1">
          <p style="font-size: 20px;">
              <span>应收金额总计：{{fee.total}} 元 {{"\u3000"}} {{"\u3000"}}</span>
              <span>实收金额总计：{{fee.reserve1}} 元  {{"\u3000"}} {{"\u3000"}}</span>
          </p>
          <el-table
            :data="insertData"
            border
            stripe
            style="width: 100%">
            <el-table-column
              prop="contractNo"
              label="租房合同号"
            width="150px">
            </el-table-column>
            <el-table-column
              prop="receiptOrderNo"
              label="收款单号"
              width="150px">
            </el-table-column>
            <el-table-column
              prop="roomName"
              label="承租房间"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="tenantName"
              label="租客姓名">
            </el-table-column>
            <el-table-column
              prop="premiseName"
              label="小区名称">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额">
            </el-table-column>
            <el-table-column
              prop="receiptNumber"
              :formatter="formatReceiptNumber"
              label="账单">
            </el-table-column>
            <el-table-column
              prop="skStatus"
              :formatter="formatSkStatus"
              label="收款状态">
            </el-table-column>
            <el-table-column
              prop="billType"
              :formatter="formatBillType"
              label="账单类型">
            </el-table-column>
            <el-table-column
              prop="collectionDate"
              label="应收日期"
            width="100px">
            </el-table-column>
            <el-table-column
              prop="realCollectionDate"
              label="实收日期"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="payMethod"
              :formatter="formatPayMethod"
              label="支付方式">
            </el-table-column>
            <el-table-column
              prop="operationUser"
              label="操作人">
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryForm.pageNo"
            :limit.sync="queryForm.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <!--支出-->
        <el-tab-pane label="租务收款计划"  name="2" @click="getList">
          <el-table
            :data="insertData"
            border
            stripe
            style="width: 100%">
            <el-table-column
              prop="contractNo"
              label="租房合同号"
              width="150px">
            </el-table-column>
            <el-table-column
              prop="receiptOrderNo"
              label="收款单号"
              width="150px">
            </el-table-column>
            <el-table-column
              prop="roomName"
              label="承租房间"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="tenantName"
              label="租客姓名">
            </el-table-column>
            <el-table-column
              prop="premiseName"
              label="小区名称">
            </el-table-column>
            <el-table-column
              prop="paymentAmount"
              label="支付金额">
            </el-table-column>
            <el-table-column
              prop="receiptNumber"
              :formatter="formatReceiptNumber"
              label="账单">
            </el-table-column>
            <el-table-column
              prop="skStatus"
              :formatter="formatSkStatus"
              label="收款状态">
            </el-table-column>
            <el-table-column
              prop="billType"
              :formatter="formatBillType"
              label="账单类型">
            </el-table-column>
            <el-table-column
              prop="collectionDate"
              label="应收日期"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="realCollectionDate"
              label="实收日期"
              width="100px">
            </el-table-column>
            <el-table-column
              prop="payMethod"
              :formatter="formatPayMethod"
              label="支付方式">
            </el-table-column>
            <el-table-column
              prop="operationUser"
              label="操作人">
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryForm.pageNo"
            :limit.sync="queryForm.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
  import {getAllFzFee,getFzFee} from "@/api/yingye/yingye";
    export default {
        name: "shoukuan",
      data(){
          return{
            receiptType: '1',
            total:1,
            queryForm:{
              receiptType: 1,
              pageNo:1,
              pageSize:10
            },
            insertData:[],
            fee:[],
            options: [{
              value: 1,
              label: '未付款'
            }, {
              value: 2,
              label: '已付款'
            }, {
              value: 3,
              label: '已中止'
            }, {
              value: 4,
              label: '已冻结'
            },],
            options2: [{
              value: 1,
              label: '分期变更'
            }, {
              value: 2,
              label: '租约保理变更'
            }, {
              value: 3,
              label: '退租变更'
            }, {
              value: 4,
              label: '普通账单'
            },],
          }
      },
      created() {
            this.getList();
      },
      methods:{
        formatBillType(row){
          /*?==1'分期变更':'租约保理变更':'退租变更':'普通账单'*/
          /*1:未收款 2：已收款 3：已中止  4：已冻结（未收款的时候，才会变成已冻结，所以恢复冻结状态的时候，是恢复成未收款状态）*/
          if (row.billType==1){
            return this.insertData.billType='分期变更'
          }
          if (row.billType==2){
            return this.insertData.billType='租约保理变更'
          }
          if (row.billType==3){
            return this.insertData.billType='退租变更'
          }
          return this.insertData.billType='普通账单'
        },
        formatSkStatus(row){
          if (row.skStatus==1){
            return this.insertData.skStatus='未收款'
          }
          if (row.skStatus==2){
            return this.insertData.skStatus='已收款'
          }
          if (row.skStatus==3){
            return this.insertData.skStatus='已中止'
          }
          return this.insertData.skStatus='已冻结'
        },
        formatReceiptNumber(row){
          return this.insertData.receiptNumber='第'+row.receiptNumber+"期"
        },
        //,1:快捷同，2：支付宝，3：微信，4：现金，5：银行卡转账，6：POS机刷卡，99：其它
        formatPayMethod(row){
          if (row.payMethod==1){
            return this.insertData.payMethod='快捷同'
          }
          if (row.payMethod==2){
            return this.insertData.payMethod='支付宝'
          }
          if (row.payMethod==3){
            return this.insertData.payMethod='微信'
          }
          if (row.payMethod==4){
            return this.insertData.payMethod='现金'
          }
          if (row.payMethod==5){
            return this.insertData.payMethod='银行卡转账'
          }
          if (row.payMethod==6){
            return this.insertData.payMethod='POS机刷卡'
          }
          return this.insertData.payMethod='其它'
        },
        handleClick(tab, event) {

          console.log(tab, event);
          if(tab.name == 2){
            // 触发‘配置管理’事件
            this.queryForm.receiptType=2
            this.getList()
          }else{
            // 触发‘用户管理’事件
            this.queryForm.receiptType=1
            this.getList()
          }
        },
        getList(){
          getAllFzFee(this.queryForm).then(res=>{
              this.insertData=res.data.list
            this.total=res.data.total
          })
          this.getFee();
        },
        getFee(){
          getFzFee().then(res=>{
            this.fee=res.data
          })
        },
      }
    }
</script>

<style scoped>

</style>
